<div class="widget-container">
    <nz-breadcrumb nzAutoGenerate="true"></nz-breadcrumb>

    <form nz-form [formGroup]="validateForm" class="form-container">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>名称</nz-form-label>
                    <nz-form-control>
                        <input nz-input formControlName="name" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>主城</nz-form-label>
                    <nz-form-control>
                        <input nz-input formControlName="address" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>英雄</nz-form-label>
                    <nz-form-control>
                        <input nz-input formControlName="hero" />
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row [nzGutter]="24">

            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>简介</nz-form-label>
                    <nz-form-control>
                        <input nz-input formControlName="text" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>状态</nz-form-label>
                    <nz-form-control>
                        <nz-select formControlName="status" style="width: 158px">
                            <nz-option nzValue="active" nzLabel="活动"></nz-option>
                            <nz-option nzValue="disabled" nzLabel="禁用"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-space>
                    <nz-space-item>
                        <button nz-button [nzType]="'primary'" (click)="queryRaceList()">查询</button>
                    </nz-space-item>
                    <nz-space-item>
                        <button nz-button [nzType]="'primary'" (click)="addRace()">新增</button>
                    </nz-space-item>
                </nz-space>
            </div>
        </div>
    </form>

    <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" [nzScroll]="{ y: 'calc(100vh - 330px)' }">
        <thead>
            <tr>
                <th nzWidth="50px" [nzChecked]="checked" (nzCheckedChange)="onAllChecked($event)"></th>
                <th nzWidth="50px"></th>
                <th nzWidth="100px">名称</th>
                <th nzWidth="100px">主城</th>
                <th nzWidth="100px">英雄</th>
                <th>简介</th>
                <th nzWidth="100px">状态</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of basicTable.data">
                <td [nzChecked]="setOfCheckedId.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
                <td>
                    <a (click)="deleteHandle(data)">
                        <i nz-icon nzType="delete" nzTheme="twotone"></i>
                    </a>
                </td>
                <td>
                    <a (click)="nextPage(data)">{{ data.name }}</a>
                </td>
                <td>{{ data.address }}</td>
                <td>{{ data.hero }}</td>
                <td>{{ data.text }}</td>
                <td>{{ statusType[data.status] }}</td>
            </tr>
        </tbody>
    </nz-table>

    <div class="g-footer">
        <nz-space>
            <nz-space-item>
                <button nz-button [nzType]="'primary'" [disabled]="!btnActive" (click)="clickHandle('A')">启用</button>
            </nz-space-item>
            <nz-space-item>
                <button nz-button [nzType]="'primary'" [disabled]="!btnDisabled" (click)="clickHandle('D')">禁用</button>
            </nz-space-item>
        </nz-space>
    </div>
</div>